<template>
  <div>
    <el-dialog title="添加变量字段" v-model="visible">
      <div class="box">
        <el-checkbox-group v-model="vals" @change="handleParentChange">
          <div v-for="(item, index) in arrayList" :key="index">
            <div
              class="bg-[#fafafa] rounded-[6px] px-[16px] py-[5px] mb-[10px] flex justify-between items-center items"
            >
              <el-checkbox :value="index"> {{ item.label }} </el-checkbox>
              <Icon icon="ep:arrow-down" :size="14" />
            </div>
            <div class="px-[15px] mb-[10px] sub" v-if="item.children">
              <el-checkbox-group v-model="values[index]" @change="handleChildChange(index)">
                <el-checkbox
                  v-for="(subitem, subindex) in item.children"
                  :key="subindex"
                  :value="subitem.value"
                >
                  {{ subitem.label }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </el-checkbox-group>
      </div>
      <template #footer>
        <div class="flex justify-end">
          <el-button @click="hide" style="border-radius: 6px !important; width: 109px"
            >取消</el-button
          >
          <el-button
            type="primary"
            color="#3721FF"
            @click="confirmField"
            style="border-radius: 6px !important; width: 109px"
            >确定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions, getStrDictOptions, DictDataType } from '@/utils/dict'
const message = useMessage()

interface FieldsItemsVO {
  label: string
  value: string
  children?: DictDataType[]
}

const emit = defineEmits(['confirm'])

const addressFields = getStrDictOptions(DICT_TYPE.ORDER_TEMPLATE_ADDRESS)

const userFields = getStrDictOptions(DICT_TYPE.ORDER_TEMPLATE_USER)

const productFields = getStrDictOptions(DICT_TYPE.ORDER_TEMPLATE_PRODUCT)

const templateFields = getStrDictOptions(DICT_TYPE.ORDER_TEMPLATE)

const visible = ref(false)

const arrayList = ref<FieldsItemsVO[]>([])

const vals = ref([])

const values = ref()

/**
 * 父级选择
 */
const handleParentChange = () => {
  values.value = Array.from({ length: arrayList.value.length }, () => [])
  if (vals.value.length > 0) {
    vals.value.map((item) => {
      arrayList.value[item].children?.map((subitem, subindex) => {
        values.value[item].push(subitem)
      })
    })
  }
}

/**
 * 子级选择
 */
const handleChildChange = (index: number) => {
  const indexs = vals.value.indexOf(index)
  if (values.value[index].length != arrayList.value[index].children?.length) {
    if (indexs !== -1) {
      vals.value.splice(indexs, 1)
    }
  } else {
    if (indexs === -1) {
      vals.value.push(index)
    }
  }
}

/**
 * 确认选择
 */

const confirmField = () => {
  let len = 0
  values.value.map((item) => {
    if (item.length) {
      len++
    }
  })
  if (len == 0) {
    message.error('请选择导出字段')
    return
  }
  console.log(values.value, 'values.value')
  //将二维数组扁平化
  let arr: any = []
  values.value.map((item, index) => {
    item.map((subitem) => {
      const filteredItems =
        arrayList.value[index].children?.filter((sitem) => sitem.value === subitem) || []
      arr.push(...filteredItems)
    })
  })
  emit('confirm', arr)
  hide()
}

const init = () => {
  arrayList.value = [
    {
      label: '订单信息',
      value: 'order',
      children: templateFields
    },
    {
      label: '商品信息',
      value: 'product',
      children: productFields
    },
    {
      label: '用户信息',
      value: 'user',
      children: userFields
    },
    {
      label: '收货地址',
      value: 'address',
      children: addressFields
    }
  ]
  values.value = [[], [], [], []]
}

onMounted(() => {
  nextTick(() => {
    init()
  })
})

const show = () => {
  visible.value = true
}

const hide = () => {
  visible.value = false
}

defineExpose({
  show,
  hide
})
</script>

<style lang="scss" scoped></style>
